<template>
  <uni-nav-bar title="投诉建议" left-icon="left" @clickLeft="redirectTo('index/mine')" :fixed="true" statusBar></uni-nav-bar>
  <view class="suggest">
    <view class="suggest_title">请选择投诉类型</view>
    <view class="suggests" v-for="item in list" :key="item" @click="changeT(item)">
      <uni-icons type="circle-filled" size="30" :color="title != item ? '#eee' : '#1B91FF'"></uni-icons>
      <text>{{ item }}</text>
    </view>
  </view>
  <!-- 相关描述 -->
  <view class="suggest_center">
    <view class="suggest_center_text">相关描述</view>
    <view><textarea class="textarea" v-model="value" placeholder="请简单描述..."></textarea></view>
  </view>
  <!-- 填写手机号码 -->
  <view class="suggest_center">
    <view class="suggest_center_text">联系方式</view>
    <view class="suggest_center_phone">
      <!-- <text>手机号</text> -->
      <input v-model="phone" type="number" placeholder="请填写手机号" maxlength="11" @input="onInput($event)" />
    </view>
  </view>
  <!-- 提交 -->
  <view class="suggest_submit" @click="submit()">提交</view>
</template>

<script setup lang="ts">
import { authorMe } from '@/gql/user';
import { getDriverID } from '@/stores/driverID';
import { redirectTo } from '@/utils/navigator';
import { showLoading, showToast, successToast } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import type { Ref } from 'vue';
import { nextTick, ref } from 'vue';
/**
 * 投诉建议主页
 * @param driver_id  用户ID
 * @param list  投诉问题列表
 * @param phone  手机号码
 * @param value  相关描述
 * @param title  选中的投诉内容
 * @return {type}
 */
// static
const driver_id = getDriverID();
const list: Ref<string[]> = ref([]);
// data
const phone = ref('');
const value = ref('');
const title = ref('');
const repeat = ref(true)//放重复点击
/**
 * 初始化问题列表
 */
function init() {
  showLoading('加载中');
  const payload = {
    query: authorMe,
    variables: {
      code: 'tousu',
    },
  };
  toPublish('ql/driver/getMyblock', payload, (obj: any) => {
    const { data } = obj;
    list.value = data.get_myblock.content.split(',');
  });
}
init();
/**
 * 正则输入框内容
 */
function onInput(evt: any) {
  const { detail } = evt;
  const rule = /[^\d]/g; //只能输入数字
  nextTick(() => {
    const value = detail.value.replace(rule, '');
    phone.value = value;
  });
}
/**
 * 正则手机号码
 */
function phoneTel() {
  const mobile = /^1[3-9]\d{9}$/;
  if (!mobile.test(phone.value)) {
    showToast('请输入正确的手机号码');
    return false;
  } else {
    return true;
  }
}
/**
 * @param {Object} num 选中的投诉内容
 */
function changeT(num) {
  title.value = num;
}
/**
 * 判断提交投诉信息
 */
function submit() {
  if (!title.value || !value.value) {
    showToast('请提交投诉信息');
    return;
  }
  if (phone.value && !phoneTel()) {
    return;
  }
  complaint();
}
/**
 * 提交投诉信息
 * @param user_id  用户ID
 * @param type  用户投诉问题类型
 * @param content  用户输入问题内容
 * @param phone  用户手机号码
 */
function complaint() {
  showLoading('正在提交');
    if(!repeat.value){
    return
  }
  repeat.value=false
  const payload = {
    user_id: driver_id,
    type: title.value,
    content: value.value,
    phone: phone.value,
  };
  toPublish('driver/addFeedback', payload, (obj: any) => {
    //接收消息并处理
    if (obj.code === 1) {
    repeat.value=true
      successToast(obj.msg);
    } else {
    repeat.value=true
      showToast(obj.msg);
    }
    setTimeout(() => {
      redirectTo('index/mine');
    }, 1500);
  });
}
</script>

<style scoped lang="less">
@import url('../mine/less/suggestions.less');
</style>
<style>
.suggest_center >>> .textarea {
  width: 100%;
}
</style>
